<template>
  <div>
    <van-nav-bar title="财务管理" left-text="返回" left-arrow v-back />
    <div class="finance-date-choose">
      <div class="finance-date-choose__time" @click="dateShow = true;">
        2019-05
        <van-icon name="arrow"></van-icon>
      </div>
      <ul class="finance-date-type">
        <li class="finance-date-type__item hover">月</li>
        <li class="finance-date-type__item">日</li>
      </ul>
    </div>
    <div class="finance-content">
      <div class="finance-content__tit">
        <van-icon name="eye-o"></van-icon>
        销售概况
      </div>
      <ul class="finance-info">
        <li class="finance-info__item">
          <div class="finance-info__item__val"><span class="unit">￥</span>8962</div>
          <div class="finance-info__item__name">总销售额</div>
        </li>
        <li class="finance-info__item">
          <div class="finance-info__item__val"><span class="unit">￥</span>2454</div>
          <div class="finance-info__item__name">本厂销售额</div>
        </li>
        <li class="finance-info__item">
          <div class="finance-info__item__val"><span class="unit">￥</span>1325</div>
          <div class="finance-info__item__name">自营销售额</div>
        </li>
        <li class="finance-info__item">
          <div class="finance-info__item__val">5000</div>
          <div class="finance-info__item__name">本厂售桶数</div>
        </li>
        <li class="finance-info__item">
          <div class="finance-info__item__val"><span class="unit">￥</span>541</div>
          <div class="finance-info__item__name">总欠款</div>
        </li>
        <li class="finance-info__item">
          <div class="finance-info__item__val"><span class="unit">￥</span>359</div>
          <div class="finance-info__item__name">总还款</div>
        </li>
      </ul>
    </div>
    <div class="finance-content">
      <div class="finance-content__tit">
        <van-icon name="apps-o"></van-icon>
        本厂水销量占比
      </div>
      <div class="finance-content__chart">
        <chart id="selfFactory" ref="selfFactory" :option="selfFactoryOption"></chart>
      </div>
    </div>
    <div class="finance-content">
      <div class="finance-content__tit">
        <van-icon name="apps-o"></van-icon>
        自营商品销量占比
      </div>
      <div class="finance-content__chart">
        <chart id="selfSell" ref="selfSell" :option="selfSellOption"></chart>
      </div>
    </div>
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker v-model="currentDate" type="year-month" @confirm="confirmDate" @cancel="cancelDate" />
    </van-popup>
  </div>
</template>

<script>
  import Chart from '@/components/Chart'
  import Pie from 'echarts/lib/chart/pie'
  export default {
    components: {
      Chart
    },
    data() {
      return {
        currentDate: new Date(),
        dateShow: false,
        selfFactoryOption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [{
            name: '本厂水销量占比',
            type: 'pie',
            radius: ['0%', '60%'],
            roseType: 'radius',
            label: {
              formatter: '{b}: {@2012}'
            },
            data: [{
                value: 280,
                name: '恒大桶装水'
              },
              {
                value: 260,
                name: '云雾峰'
              },
              {
                value: 234,
                name: '恒大冰泉'
              },
              {
                value: 180,
                name: '大围森林'
              },
              {
                value: 320,
                name: '天际山'
              }
            ]
          }]
        },
        selfSellOption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [{
            name: '自营商品销量占比',
            type: 'pie',
            radius: ['0%', '60%'],
            roseType: 'radius',
            label: {
              formatter: '{b}: {@2012}'
            },
            data: [{
                value: 238,
                name: '卫龙'
              },
              {
                value: 224,
                name: '辣条'
              },
              {
                value: 167,
                name: '可乐'
              },
              {
                value: 180,
                name: '薯片'
              },
              {
                value: 158,
                name: '鸡翅'
              }
            ]
          }]
        }
      }
    },
    methods: {
      cancelDate(){
        this.dateShow = false;
      },
      confirmDate(val){
        console.log(val);
        this.dateShow = false;
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../../styles/variable.less';

  .finance-content {
    border-radius: 8px;
    margin: 10px;
    background: #fff;
    overflow: hidden;

    .finance-content__tit {
      padding: 10px;
      font-size: 14px;
      border-bottom: 1px solid @col-bb;

      i {
        position: relative;
        top: 3px;
        font-size: 18px;
        margin-right: 2px;
      }
    }
  }

  .finance-info {
    .finance-info__item {
      float: left;
      width: 33%;
      padding: 10px 0;
      border-bottom: 1px solid @col-bb;
      border-right: 1px solid @col-bb;

      &:nth-child(3n) {
        border-right: unset;
      }

      text-align: center;

      .finance-info__item__val {
        font-size: 14px;

        .unit {
          font-size: 10px;
        }
      }

      .finance-info__item__name {
        margin-top: 5px;
        font-size: 12px;
        color: @col-the;
      }
    }
  }

  .finance-date-choose {
    margin: 10px 15px;
    display: flex;
    justify-content: space-between;

    .finance-date-choose__time {
      font-size: 12px;
      padding: 5px 20px;
      background: #fff;
      border-radius: 15px;

      i {
        position: relative;
        top: 2px;
      }
    }

    .finance-date-type {
      display: flex;
      background: #fff;
      border-radius: 12px;

      .finance-date-type__item {
        padding: 5px 20px;
        border-radius: 12px;
        font-size: 12px;

        &.hover {
          background: @col-the;
          color: #fff;
        }
      }
    }
  }

</style>
